<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <title>附近</title>
    <style type="text/css" rel="stylesheet">
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        img,
        canvas {
            -webkit-touch-callout: none;
        }

        #container {
            width: 100%;
            height: 100%;
        }

        .amap-logo img {
            margin-left: 55px;
            margin-bottom: 10px;
        }

        .amap-scalecontrol {
            margin-left: 58px;
            margin-bottom: 15px;
        }

        .amap-copyright {
            display: none;
        }

        .locationIcon {
            background-color: #fff;
            width: 36px;
            height: 36px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            box-shadow: 2px 2px 5px #888888;
        }

        .locationIcon > img {
            width: 32px;
            margin-left: 2px;
            margin-top: 2px;
        }

        .makerStyle {
            background-color: #FF4814;
            font-size: 12px;
            color: #fff;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .infoWindow {
            width: 280px;
            height: 130px;
            font-size: 13px;
            background-color: #fff;
            box-shadow: 2px 2px 2px #888;
            padding-bottom: 20px;
        }

        .info_arrow {
            height: 20px;
            width: 20px;
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            padding-left: 0 !important;
            position: absolute;
            left: 125px;
            top: 132px;
            background-color: #ffffff;
            z-index: 4;
        }

        .info_title {
            background-color: #0090FF;
            height: 28px;
            line-height: 28px;
            color: #fff;
            padding-left: 10px;
        }

        .infoWindow > div {
            padding-left: 10px;
            margin-bottom: 5px;
        }

        .info_name {
            margin-top: 10px;
        }

        .info_address {
            color: #434754;
        }

        .info_type {
            color: #434754;
        }

        .info_dis {
        }

        .dis_span {
            color: #FA2D00;
            font-weight: bold;
        }

        .info_close {
            position: absolute;
            width: 28px;
            height: 26px;
            right: 0;
            top: 0;
        }

        .info_close > img {
            margin-top: 3px;
            right: 3px;
            width: 20px;
        }

        .loc_circle {
            width: 50px;
            height: 50px;
            border: 2px solid #49B3F4;
            border-radius: 50px;
            background-color: #64C7FA;
            opacity: 0.5;
        }

        .loc_img {
            position: relative;
            left: 20px;
            top: -34px;
        }
    </style>
</head>

<body>
<div id="container" tabindex="0"></div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=c68f5969b8d1061d2ef0eac9a0196d63"></script>
<script type="text/javascript">
  var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom: 10
  });

  var locationIcon = '<div class="locationIcon">'
    + '<img src="geolocation.png"/>'
    + '</div>';
  ;

  map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'],
    function () {
      map.addControl(new AMap.ToolBar());

      map.addControl(new AMap.Scale());

      map.addControl(new AMap.OverView({isOpen: true}));
    });
  map.plugin('AMap.Geolocation', function () {
    var geolocation = new AMap.Geolocation({
      enableHighAccuracy: true,//是否使用高精度定位，默认:true
      timeout: 10000,          //超过10秒后停止定位，默认：无穷大
      maximumAge: 0,           //定位结果缓存0毫秒，默认：0
      convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      showButton: true,        //显示定位按钮，默认：true
      buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
      buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
      showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
      showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      buttonDom: locationIcon
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition();
    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
  });
  var onComplete = function (data) {
    map.clearMap();
    doSearch([data.position.lng, data.position.lat]);
  };
  var onError = function () {
    alert('定位失败，请在手机上开启定位:设置->隐私->定位服务->找厕所->使用应用期间');
  };
</script>
</body>

</html>